<!-- 编辑用户 -->
<template>
  <div>
    <a-modal
      :title="$t('Edit')+$t('User')"
      v-model="modalVisible"
      width="35%"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :maskClosable="false"
      v-dragModal
    >
      <a-form :form='form'>
	      <a-form-item :label="$t('User')+$t('Name')" v-bind='formLayout'>
			    <a-input 
            v-decorator="['username',{
	            rules:[{required:true,message:$t('Enter') + $t('User')+$t('Name')}],
              initialValue:targetUser.username
	            }]" disabled :placeholder="$t('Enter') + $t('User')+$t('Name')">
	        </a-input>
			  </a-form-item>
        <!-- 身份 -->
        <a-form-item :label="$t('Identity')" v-bind='formLayout'>
			    <a-select 
            v-decorator="['role_name',{
	            rules:[{required:true,message:$t('Choose')+ $t('Identity')}],
              initialValue:roleMap[targetUser.role_name]
	          }]" placeholder="$t('Choose')+ $t('Identity')"
            :disabled="isAdmin"
          >
            <a-select-option v-for="item in roleArray" :value="item.role_id" :key="item.role_id">
              <!-- {{$store.state.language=='zh' ? item.ch_name : item.en_name}} -->
              {{item.role_name}}
            </a-select-option>
            <!-- <a-select-option value='admin'>{{$t('Admin-identity')}}</a-select-option>
	          <a-select-option value='visitor'>{{$t('Visitor')}}</a-select-option>
	          <a-select-option value='samba'>samba</a-select-option>注释 -->
	        </a-select>
			  </a-form-item>
        <a-form-item :label="$t('Change-pwd')" v-bind='formLayout' v-if="targetUser.sources_name == 'local'">
          <a-switch :checked="passwordChecked" @change="onIsChangePassword" />
        </a-form-item>
        <a-form-item :label="$t('Password')" v-bind='formLayout' v-if="isEditPassword">
			    <a-input-password 
            v-decorator="['password',{
	            rules:[
                {required:true,message:$t('Enter')+$t('Password')},
                {validator: validateToNextPassword2},
                {pattern:/^[^\s\u4e00-\u9fa5]{6,20}$/,message: $t('Password_rule_prompt')}
              ],
              initialValue:targetUser.password
	            }]" :placeholder="$t('Enter')+$t('Password')" @change="passwordChange2">
	        </a-input-password>
			  </a-form-item>
        <a-form-item :label="$t('Sure')+$t('Password')" v-bind='formLayout' v-if="isEditPassword">
			    <a-input-password 
            v-decorator="['xpassword',{
	            rules:[
                {required:true,message:$t('Confirm_pwd_again')},
                {validator: compareToFirstPassword2},
              ],
              initialValue:targetUser.password
	          }]" :placeholder="$t('Confirm_pwd_again')">
            <!-- {pattern:/^[^\s\u4e00-\u9fa5]{6,20}$/,message: $t('Password_rule_prompt')} -->
	        </a-input-password>
			  </a-form-item>
                <!-- <a-form-item label='Addr' v-bind='formLayout'>
			      	<a-select v-decorator="['addr',{
	                    rules:[{required:true,message:$t('Confirm_pwd_again') + 'Addr'}],initialValue:targetUser.addr
	                }]" disabled :placeholder="$t('Confirm_pwd_again') + 'Addr'">
                        <a-select-option value='127.0.0.1'>127.0.0.1</a-select-option>
	                </a-select>
			    </a-form-item> -->
                <!-- <a-form-item :label="$t('Extended-attributes')" v-bind='formLayout'>
			      	<a-input v-decorator="['xattrs',{
	                    initialValue:targetUser.xattrs
	                }]" :placeholder="$t('Enter')+ $t('Extended-attributes')">
	                </a-input>
			    </a-form-item> -->
		  </a-form>
      <template slot="footer">
        <a-button @click="handleCancel" class="submit-btn">
          {{$t('Cancel')}}
        </a-button>
        <a-button
          class="submit-btn"
          type="primary"
          @click="handleSubmit"
          :loading="submitLoading"
        >
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import request from '@/request/request'

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    targetUser: {},
    roleArray: {},
    roleMap: {},
    isAdmin: {
      type: Boolean,
      required: true
    }
  },

  data() {
    return {
      modalVisible: false,
      form: this.$form.createForm(this),
      formLayout:{
        labelCol: {span: 6},
        wrapperCol: {span: 17}
      },
      submitLoading: false,
      isEditPassword: false,
      passwordChecked: false
    }
  },

  watch: {
    visible(newValue) {
      this.modalVisible = newValue;
      if(!newValue) {
        this.passwordChecked = false;
        this.isEditPassword = false;
      }
    }
  },
  
  methods: {
    //提交编辑用户
    handleSubmit(e){
      e.preventDefault();
      this.form.validateFields((err,value)=>{
        if(!err){
          request('post', 'usermanager/update',{
            id: this.targetUser.id,
            // addr: value.addr,
            // identity: 'admin',
            password: this.isEditPassword ? value.password : undefined,
            username: value.username,
            sources_name: this.targetUser.sources_name,
            role_id: value.role_name,
            user_type:this.targetUser.user_type,
            // xattrs: value.xattrs
          }).then(res=>{
            this.model(res.data.id) //返回模板
            this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
            this.$emit('closeOperateModal', 'edit-user');
            this.form.resetFields();
            this.$emit('updateData');
          })
        }
      })
    },

    //是否修改密码
    onIsChangePassword(checked) {
      this.passwordChecked = checked;
      this.isEditPassword = checked;
    },

    // 确认密码
    compareToFirstPassword2(rule, value, callback,num) {
      const form = this.form;
			if (value && value !== form.getFieldValue('password')) {
				callback(this.$t('Pwd-error'));
			} else {
				callback();
			}
		},
    validateToNextPassword2(rule, value, callback,num) {
      const form = this.form;
			if (value && this.confirmDirty) {
				form.validateFields(['confirm'], { force: true });
			}
			callback();
    },

    passwordChange2(e) {
      if(this.form.getFieldValue('xpassword') != '' && this.form.getFieldValue('xpassword')==e.target.value) {
        this.form.setFieldsValue({
          xpassword: e.target.value
        })
      }
    },

    //关闭弹窗
    handleCancel(e){
      this.$emit('closeOperateModal', 'edit-user');
      this.form.resetFields();
    },
  },
}
</script>
<style scoped>
  .submit-btn {
    width: 70px;
  }
</style>